<template>
	<section class="content">
		<topHeader></topHeader>
		<!-- <navbar :title="$t('xiaoxi.title')" :right_show="false" :type="1" ref="navbar"></navbar> -->
		<div class="noticeBox">
			<div class="noticeBoxLeft">
				<img src="../assets/img/laba.png" alt="">
				<p>{{$t('newList.title137')}}</p>
			</div>
			<van-notice-bar left-icon="" :text="str_tongshi" color="#fff" class="tongzhi" />
			<!-- 图标：volume-o -->
		</div>
		<section class="cont">
			<div class="xiaoxiTitle">
				{{$t('newNoForm.title1')}}
			</div>
			<div class="xiaoxiList">
				<div class="xiaoxiListIt">
					<div class="xiaoxiListItL">
						{{$t('newNoForm.title2')}}
					</div>
					<div class="xiaoxiListItR">
						{{$t('newNoForm.title3')}}
					</div>
				</div>
				<div class="xiaoxiListIt" v-for="item in list" @click="getItem(item)">
					<div class="xiaoxiListItL">
						{{item.title}}
					</div>
					<div class="xiaoxiListItR">
						{{item.created_at}}
					</div>
				</div>
			</div>
			<!-- 	<article class="top">
				<p>{{$t('xiaoxi.table[0]')}}</p>
				<p>{{$t('xiaoxi.table[1]')}}</p>
				<p>{{$t('xiaoxi.table[2]')}}</p>
			</article>
			<article v-for="item in list">
				<p>{{item.title}}</p>
				<p>{{item.content}}</p>
				<p style="color: #757575;">{{item.created_at}}</p>
			</article> -->

			<!-- <div style="height: .3rem;"></div> -->
			<!-- <van-pagination v-model="currentPage" :page-count="pageCount" :show-page-size="5" force-ellipses
				@change="fun_change" /> -->
			<bottom></bottom>
		</section>
		<van-popup v-model="show" class="iframe_alert">
			<div class="popTitle">
				<p>{{popContent.title}}</p>
				<img src="../assets/img/guanbiBot.png" alt="" @click="show=false">
			</div>
			<div class="popCon">
				{{popContent.content}}
			</div>
			<div class="popBot">
				<div class="popBotTow" @click="show=false">
					{{$t('newNoForm.title8')}}
				</div>
			</div>
		</van-popup>
	</section>
</template>

<script>
	import navbar from "@/components/navbar"
	import topHeader from "@/components/topHeader"
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import Bottom from "@/components/bottom"
	import {
		Pagination,
		NoticeBar,
	} from 'vant'
	export default {
		name: "xiaoxi",
		components: {
			navbar,
			topHeader,
			Bottom,
			[Pagination.name]: Pagination,
			vueSeamlessScroll,
			[NoticeBar.name]: NoticeBar,
		},
		data() {
			return {
				currentPage: 1, //当前页
				pageCount: 1, //总页
				list: [],
				str_tongshi: '',
				show: false,
				popContent: {}
			}
		},
		mounted() {
			this.onload();
		},
		methods: {
			onload() {
				this.$https.fetchGet('/m/msg', {
					'page': this.currentPage
				}).then(res => {
					let data = res.data
					this.list = data.data
					this.pageCount = data.last_page;
					this.userinfo();
				})
			},
			userinfo() {
				this.$https.fetchGet('/m/personal', {}).then(res => {
					let data = res.data
					this.str_tongshi = data.system_notices.content + '        線上人數' + parseInt(Math.random() *
						10000, 10)
				})
			},
			fun_change() {
				this.onload()
			},
			getItem(item) {
				this.popContent = item;
				this.show = true;
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		height: calc(100vh);
		// background: url("~path_img/xiaoxibg.jpg") center no-repeat;
		// background-size: cover;
	}

	.xiaoxiTitle {
		width: 100%;
		font-size: 18px;
		color: #fff;
		margin: 5px 0px 10px;
		text-align: center;
	}

	.xiaoxiList {
		width: 98%;
		margin: 10px auto 0;
		background-color: #fff;
		border-radius: 5px;
		padding: 10px;
		box-sizing: border-box;

		.xiaoxiListIt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #dddddd;
			padding: 8px 0px;
			font-size: 13px;
			box-sizing: border-box;

			.xiaoxiListItL {
				color: #337ab7;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
			}

			.xiaoxiListItR {
				color: #000000;
			}
		}

		.xiaoxiListIt:first-child {
			font-size: 14px;
			font-weight: 600;

			.xiaoxiListItL {
				color: #000000;
			}

			.xiaoxiListItR {
				color: #000000;
			}
		}

		.xiaoxiListIt:last-child {
			border-bottom: 0px;
		}
	}

	.noticeBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 4px;
		box-sizing: border-box;

		.noticeBoxLeft {
			width: 17%;
			display: flex;
			align-items: center;

			img {
				width: 25px;
				height: 16px;
			}

			p {
				font-size: 12px;
				color: #ffc93e;
			}
		}

		.tongzhi {
			width: 83%;
			background-color: #222222;
			color: #fff;
			font-size: 12px;
			height: 30px;
			padding: 0px 0px;
			box-sizing: border-box;
		}
	}

	.cont {
		padding-bottom: .5rem;

		article {
			display: flex;
			font-size: .33rem;
			color: #fff;
			border-bottom: .02rem solid #837863;
			padding: .6rem 0;
			align-items: center;

			p {
				display: block;

				&:nth-child(1) {
					width: 30%
				}

				&:nth-child(2) {
					width: 50%
				}

				&:nth-child(3) {
					width: 20%
				}
			}
		}

		.top {
			line-height: .8rem;
			padding: 0;
			font-size: .36rem;
			border-bottom: none;
			background: rgba(255, 255, 255, .35);
		}
	}

	.iframe_alert {
		width: 94%;
		background-color: #ffffff;
		margin: -100px auto 0;
		border-radius: 0.2rem;
		height: 60vh;
		padding: 20px 15px;
		box-sizing: border-box;
		.popTitle{
			width: 100%;
			position: relative;
			padding:0 0 15px 0;
			box-sizing: border-box;
			img{
				width: 25px;
				height: 25px;
				position: absolute;
				right: 0px;
				top: 25%;
				transform: translateY(-50%);
			}
			p{
				color: #000;
				font-size: 18px;
			}
			
		}
		.popCon{
			height: 80%;
			overflow-y: scroll;
			border-top: 1px dotted #ccc;
			border-bottom: 1px dotted #ccc;
			padding: 10px 0px;
			font-size: 15px;
			color: #000;
			text-align: center;
		}
		.popBot{
			width: 100%;
			display: flex;
			align-items: center;justify-content: flex-end;
			margin-top: 10px;
			.popBotTow{
				width: 50px;
				height: 30px;
				text-align: center;
				color: #000;
				line-height: 30px;
				font-size: 14px;
				border-radius: 5px;
				border: 1px solid #ccc;
			}
		}
	}
</style>
<style>
	.van-pagination {
		background: transparent;
		text-align: center;
	}

	.van-pagination li:first-child,
	.van-pagination li:last-child {}

	.van-pagination li {
		background: transparent;
		border: none;
		color: #fff;
		opacity: 1;
	}

	.van-pagination li:after {
		display: none;
	}

	.van-pagination__item--active {
		min-width: .5rem !important;
		width: .5rem !important;
		height: .5rem !important;
		margin-top: .3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000 !important;
		border-radius: 50%;
		background-color: #ffdd1d !important;
	}
</style>